<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select
          v-model="searchObj.rank"
          placeholder="请选择职称"
          @change="RankChanged()"
        >
          <el-option
            v-for="item in rankList"
            :key="item.dictName"
            :label="item.dictName"
            :value="item.dictName"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select
          v-model="searchObj.collegeId"
          placeholder="请选择学院"
          @change="collegeNameChanged()"
        >
          <el-option
            v-for="item in CollegeList"
            :key="item.collegeId"
            :label="item.collegeName"
            :value="item.collegeId"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-input v-model="searchObj.teacherName" placeholder="教师名称" />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getTeachers()"
        >查询</el-button
      >
      <el-button type="default" @click="reset()">清空</el-button>
    </el-form>
    <!-- 工具条 -->
    <div>
      <el-button type="danger" icon="el-icon-delete" @click="removeRows()"
        >批量删除</el-button
      >
    </div>

    <el-table
      :data="teachers"
      style="width: 100%"
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="学工号">
              <span>{{ props.row.teacherId }}</span>
            </el-form-item>
            <el-form-item label="姓名">
              <span>{{ props.row.teacherName }}</span>
            </el-form-item>
            <el-form-item label="性别">
              <span>{{ props.row.sex }}</span>
            </el-form-item>
            <el-form-item label="职称">
              <span>{{ props.row.rank }}</span>
            </el-form-item>
            <el-form-item label="学院">
              <span>{{ props.row.collegeName }}</span>
            </el-form-item>
            <el-form-item label="民族">
              <span>{{ props.row.nationality }}</span>
            </el-form-item>
            <el-form-item label="电话">
              <span>{{ props.row.tel }}</span>
            </el-form-item>
            <el-form-item label="邮箱">
              <span>{{ props.row.email }}</span>
            </el-form-item>
            <el-form-item label="办公地点">
              <span>{{ props.row.officeSpace }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column type="selection" width="55" />
      <el-table-column label="学工号" prop="teacherId" sortable>
      </el-table-column>
      <el-table-column label="头像" prop="headshotUrl">
        <template slot-scope="scope">
          <img
            :src="scope.row.headshotUrl"
            style="width: 100px; height: 80px"
          />
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="teacherName" sortable>
      </el-table-column>
      <el-table-column label="职称" prop="rank" sortable> </el-table-column>
      <el-table-column label="学院" prop="collegeName" sortable>
      </el-table-column>
      <el-table-column label="操作" width="280" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit"
            >添加</el-button
          >

          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="removeDataById(scope.row.teacherId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-table-column label="操作" width="280" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit"
            >添加</el-button
          >

          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="removeDataById(scope.row.id)"
            >删除</el-button
          >
        </template></el-table-column
      ></el-table
    > -->
    <!-- 分页 -->
    <el-pagination
      :current-page="current"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="getTeachers"
    />
  </div>
</template>


<script>
import dictApi from "@/api/dict";
import collegeApi from "@/api/college";
import teacherApi from "@/api/teacher";
export default {
  data() {
    return {
      teachers: [],
      current: 1,
      limit: 10,
      total: 0,
      searchObj: {},
      multipleSelection: [],
      rankList: [],
      CollegeList: [],
    };
  },
  created() {
    this.getDictList();
    this.getCollege();
    this.getTeachers(1);
  },
  methods: {
    //获取教师列表
    getTeachers(page = 1) {
      this.current = page;
      teacherApi
        .teacherCondition(this.current, this.limit, this.searchObj)
        .then((res) => {
          this.teachers = res.data.rows;
          this.total = res.data.total;
        });
    },
    removeDataById(id) {
      console.log(id);
      this.$confirm("此操作将永久删除教师信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //确定执行then方法
        var ids = [];
        ids.push(id);

        //调用接口
        teacherApi.deleteTeacher(ids).then((response) => {
          //提示
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          //刷新页面
          this.getTeachers(1);
        });
      });
    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
    },
    reset() {
      this.searchObj = {};
      this.getTeachers(1);
    },
    getDictList() {
      dictApi.getRankList().then((res) => {
        this.rankList = res.data.data;
      });
    },
    getCollege() {
      collegeApi.getCollegeList().then((res) => {
        this.CollegeList = res.data.page.list;
      });
    },
    removeRows() {
      this.$confirm("此操作将永久删除教师信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //确定执行then方法
        var idList = [];
        //遍历数组得到每个id值，设置到idList里面
        for (var i = 0; i < this.multipleSelection.length; i++) {
          var obj = this.multipleSelection[i];
          var id = obj.teacherId;
          console.log(id);
          idList.push(id);
        }
        //调用接口
        teacherApi.deleteTeacher(idList).then((response) => {
          //提示
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          //刷新页面
          this.getTeachers(1);
        });
      });
    },
    RankChanged() {
      this.getTeachers(this.current, this.limit, this.searchObj);
    },
    collegeNameChanged() {
      this.getTeachers(this.current, this.limit, this.searchObj);
    },
  },
};
</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>